@import "font";
@import "init";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .MyFont();
}

.keyboardDown {
  transform: translateY(10px);
}

.keyDown {
  transform: scale(0.9);
  background-color: gray !important;
}

body {
  

  h1 {
    text-align: center;
    line-height: 2em;
    color: #9cdcfe;
    font-size: 40px;
    .EngFont();
  }

  button, input, textarea, dialog {
    background-color: #222;
    color: #fff;
  }

  main {
    width: 90%;
    margin: 0 auto;
    outline: solid 1px;
    padding-top: 20px;
    padding-bottom: 200px;
    .whiteKeyCss() {
      outline: solid 1px dimgray;
      background-color: lightgray;
    }
    .blackKeyCss() {
      outline: solid 1px dimgray;
      background-color: #222;
      box-shadow: black -5px -2px 0 inset;
    }


    .allKey {
      @whiteKeyWidth: 20px;
      @blackKeyWidth: @whiteKeyWidth*0.75;
      @whiteKeyHeight: 120px;
      @keyTop: 200px; // 上面留白距离

      width: @whiteKeyWidth*49;
      height: 500px;
      margin: 10px auto;
      outline: solid 1px;
      position: relative;

      .whiteKey {
        width: @whiteKeyWidth;
        height: @whiteKeyHeight;
        position: absolute;
        .whiteKeyCss();
        transition: all 0.2s;

        top: @keyTop;
      }

      .blackKey {
        @w: @blackKeyWidth;
        width: @w;
        height: @whiteKeyHeight*0.6;
        position: absolute;
        margin-left: -(@w/2);
        .blackKeyCss();

        transition: all 0.2s;
        top: @keyTop;
      }

      .leftHand, .rightHand {
        position: absolute;
        transition: all 0.2s;
        z-index: 200;

        .keyboardBlock {
          width: @whiteKeyWidth;
          float: left;
          text-align: center;
          font-size: 20px;
          line-height: 2em;
          outline: solid 1px royalblue;
          color: #fff;
          background-color: #999;
          border-radius: @whiteKeyWidth;
          .EngFont();
          transition: all 0.2s;
        }

        .L1, .L2, .L8, .L9, .R8, .R9 {
          margin-top: 5px;
        }


        .R3 {
          margin-top: 15px;
        }

        .R1, .R2 {
          margin-top: 18px;
        }
      }


      .leftHand {
        top: 360px;
        left: 14*@whiteKeyWidth;

      }

      .rightHand {
        left: 19*@whiteKeyWidth;
        top: 280px;
        //background-color: red;
      }

    }


  }
}

@import "pianoSettings";
